$shippingOptionHeight: 80px
$shippingPageMargin: 10px

$selectedColor: #FB4D53

$ten: 10px
$thirteen: 13px

page
  background-color: #f7f7f7
  height: 100%
.shipping-method
  height: 100%
  .mask
    z-index: 46
    background-color: rgb(0, 0, 0)
    border: none
    opacity: 0
    position: absolute
    width: 100%
    height: 100%
    pointer-events: none
    &.enable
      pointer-events: auto

  .shipping-option-wrapper
    height: $shippingOptionHeight
    padding: $shippingPageMargin
    background-color: white
    position: relative
    //z-index: -1
    .d4
      bottom: -1px
      transition: all .4s ease-in-out
      &.seller
        left: 40px
      &.self
        left: 130px
    .text
      font-size: 13px
      margin-left: 6px
    .shipping-option
      font-size: 13px
      display: flex
      padding-top: 13px
      .choice
        width: 80px
        height: 30px
        margin-right: 8px
        line-height: 30px
        border-radius: 2px
        text-align: center
        border: 1px solid rgba(166, 164, 164, 1)
        &.selected
          color: $selectedColor
          border: 1px solid $selectedColor

  .goods-wrapper
    //z-index: -1
    .title
      padding: $ten
      font-size: $thirteen
    .image-wrapper
      margin: 0 0 0 $ten
      padding-bottom: $ten
      display: flex
      border-bottom: .5px solid #d6d6d6
      .image
        width: 60px
        height: 60px
        margin-right: $ten
        img
          width: 100%
          height: 100%
    .desc
      //transition: all .3s ease-in-out

      padding: $ten
      font-size: 12px
      color: #b5b5b5
      height: 20px
      border-bottom: .5px solid #d6d6d6
      .place
        padding-bottom: 6px
      .option1
        position: relative
      .option2
        opacity: 0
  .choose-time
    height: 0
    background-color: white
    z-index: 50
    position: fixed
    bottom: 0
    width: 100%
    .band
      position: relative
      font-size: 13px
      text-align: center
      width: 100%
      height: 35px
      line-height: 35px
      background-color: rgb(244, 242, 248)
      .close
        position: absolute
        right: 5px
        top: 0
        padding: 0 8px
    .date-wrapper
      text-align: left
      .date
        display: inline-block
        font-size: 10px
        margin: 8px 10px
        flex: 1
        width: 100px
        height: 25px
        line-height: 25px
        border-radius: 5px
        text-align: center
        background-color: rgb(244, 242, 248)
        &.selected
          background-color: $selectedColor
          color: white

  .bottom-operate
    //z-index: -1
    padding: 0 8px
    box-sizing: border-box
    position: fixed
    height: 50px
    width: 100%
    display: flex
    align-items: center
    background: rgb(255,255,255)
    bottom: 0
    text-align: center
    .money
      display: flex
      align-items: center
      position: absolute
      right: 140px
      font-size: 13px
      span
        color: rgb(255,67,60)
        font-weight: bold

    .checkout
      background-color: rgb(255,67,60)
      color: white
      position: absolute
      right: 0
      height: 100%
      width: 120px
      display: flex
      justify-content: center
      align-items: center
      font-size: 13px
